<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>マスター登録</title>
    <link type="text/css" rel="stylesheet" href="csslib/style.css" />
    <script type="text/javascript" src="jslib/jquery.min.js"></script>
    <script type="text/javascript">
    //<!CDATA[
    var query = {};
    $(function(){
    	$("#empNo").focus();
    	$("#add").click(addEmp);

    	$("#empNo").keyup(function(){
    		if($("#empNo").val().length == 5){
    			$("#empName").focus();
    		}
    	});
    	$("#sex").click(function(e){
    		query["sex"] = e.target.value;
    	});
    	$("#depart").click(function(e){
    		query["depart"] = e.target.value;
    		if(e.target.id == "101"){
    			seskills();
    		}else{
    			$("#skills").html('<input type="text" size="34" id="sk" />');
    		}
    	});
    });
  
    //所属部署でSEが選択された場合スキル項目のチェックリストを表示する
    function seskills(){
    	var sesk = '<table>' 
    		+ '<tr><td><input type="checkbox" name="skills" id="201" value="プロジェクト管理" />プロジェクト管理</td></tr>'
    		+ '<tr><td><input type="checkbox" name="skills" id="202" value="データベース管理" />データベース管理</td></tr>'
    		+ '<tr><td><input type="checkbox" name="skills" id="203" value="ネットワーク管理" />ネットワーク管理</td></tr>'
    		+ '<tr><td><input type="checkbox" name="skills" id="204" value="セキュリティ管理" />セキュリティ管理</td></tr>'
    		+ '<tr><td><input type="checkbox" name="skills" id="205" value="Webシステム" />Webシステム</td></tr>'
    		+ '<tr><td><input type="checkbox" name="skills" id="206" value="Javaログラミング" />Javaログラミング</td></tr>'
    		+ '</table>';
    		$("#skills").html(sesk);   		
    }
    
    function addEmp(){
    	var skills = "";
    	query["empNo"] = $("#empNo").val();
    	query["empName"] = $("#empName").val();
    	query["bdate"] = $("#byear").val() + "-" + $("#bmonth").val() + "-" + $("#bday").val();
    	//query["depart"] = $("#depart").val();
    	query["section"] = $("#section").val();
    	if(query["depart"] == "101"){
	    	for(var i = 201; i < 207; i++){
	    		if(document.getElementById(i + "").checked == true){
	    			skills += i + " ";
	    		}
	    	}
    	}
    	skills = skills.substr(0, skills.length - 1);
    	query["skills"] = skills;
    	
    	//POSTメソッドでqueryデータをサーバーに送信
    	$.post("/add4", query, function(resp){
    		$("#status").text(resp);
    		clear();
    	})
    }
    
    function clear(){
    	$.each(["empNo", "empName", "depart", "section"], function(){
    		$("#" + this).val("");
    	});
    	$("#date").text(" ");
    	$("#empNo").focus();
		$("#skills").html('<input type="text" size="34" id="sk" />');
    }
    //]]
    </script>
</head>

<body>
	<table width="330" border="1" cellpadding="0">
	<tr>
		<th colspan="2">社員マスタ登録
			&nbsp;<input type="button" id="add" value=" 登録 " />
		</th>
	</tr>
	<tr>
		<th>社員番号</th>
		<td><input type="text" size="12" id="empNo" />
	</tr>
	<tr>
		<th>社員氏名</th>
		<td><input type="text" id="empName" /></td>
	</tr>
	<tr>
		<th>生年月日</th>
		<td>
			西暦 : 
			<input type="text" size="5" id="byear" />年
			<input type="text" size="2" id="bmonth" />月
			<input type="text" size="2" id="bday" />日
		</td>
	</tr>
	<tr>
		<th>性別</th>
		<td id="sex">
			<input type="radio" name="sex" id="01" value="男性" />男性
			<input type="radio" name="sex" id="02" value="女性" />女性
		</td>
	</tr>
	<tr>
		<th>所属部署</th>
		<td id="depart">
			<input type="radio" name="depart" id="101" value="SE" />SE
			<input type="radio" name="depart" id="102" value="営業" />営業
			<input type="radio" name="depart" id="103" value="経理" />経理
			<input type="radio" name="depart" id="104" value="人事" />人事
		</td>
	</tr>
	<tr>
		<th>スキル項目</th>
		<td id="skills">
			<input type="text" size="34" id="sk" />
		</td>
	</tr>
	<tr>
      <th>所属課</th>
      <td><input type="text" name="section" id="section" tabindex="4" /></td>
    </tr>
    <tr>
      <th>更新日時</th>
      <td id="date">&nbsp;</td>
    </tr>
    <tr>
      <th>ステータス</th>
      <td id="status">&nbsp;</td>
    </tr>
	</table>
</body>
</html>
